<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="<?php echo site_url() ?>assets/js/datepicker/daterangepicker-bs3.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>assets/js/datepicker/moment.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>assets/js/datepicker/daterangepicker.js"></script>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>

<link href="<?php echo site_url() ?>assets/css/nhatnv.css" media="all" rel="stylesheet" type="text/css" />

<script type="text/javascript">
            $(function () {

            $('#dropup').val('<?php echo $time ?>');
                    $('#dropup').daterangepicker({
            format: 'DD/MM/YYYY',
                    showDropdowns: true,
                    ranges: {
                    'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    buttonClasses: ['btn', 'btn-sm'],
                    applyClass: 'btn-primary',
                    cancelClass: 'btn-default',
                    separator: '-',
            }, function (start, end, label) {
            var url = '<?php echo site_url() ?>list-denny-member?time=' + $('#dropup').val();
                    window.location = url;
            });
                    //
                    $('.caret-select').click(function () {
            $('#div-search').show();
            });
                    $('#cancel-serach').click(function () {
            $('#div-search').hide();
            });
                    $(function ()
                    {
                        $('.change-method-access-device').click(function()
                        {
                        var r = confirm("Bạn có chắc chắn muốn thay đổi trạng thái người dùng này? \nNếu bạn đồng ý thay đổi, mọi thay đổi sẽ có hiệu lực sau 5 phút nữa.");
                                if (r == true) {
                                    var mac = $(this).data('mac');
                                    var id = $(this).data('id');
                                    var type = $(this).data('type');
                                    changestatusaccess(mac, id, type);
                                }
                        });
                        
                        
                    $('#network_group').on('change', function ()
                    {
                    var ids = $(this).val();
                            $('#provincehtml').html('<label>Tỉnh /thành phố</label><select name="province_search"><option value="0">Xin chờ...</option></select>');
                            $('#districthtml').html('<label>Quận / Huyện</label><select name="district_search"><option value="0">Xin chờ...</option></select>');
                            $('#placehtml').html('<label>Địa điểm</label><select name="place_search"><option value="0">Xin chờ...</option></select>');
                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Xin chờ...</option></select>');
                            $.ajax({
                            type: 'post',
                                    url: '<?php echo site_url() ?>get-province-device-member',
                                    data: ({id: ids}),
                                    success: function (html)
                                    {
                                    $('#provincehtml').html(html);
                                            $('#districthtml').html('<label>Quận / Huyện</label><select name="district_search" id="district_search"><option value="0">Chọn quận huyện</option></select>');
                                            $('#placehtml').html('<label>Địa điểm</label><select name="place_search" id="place_search"><option value="0">Chọn địa điểm</option></select>');
                                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Chọn thiết bị</option></select>');
                                    }
                            });
                    });
                            $(document).on('change', '#province_search', function ()
                    {
                    var ids = $(this).val();
                            var id_g = $('#network_group').val();
                            $('#districthtml').html('<label>Quận / Huyện</label><select name="district_search"><option value="0">Xin chờ...</option></select>');
                            $('#placehtml').html('<label>Địa điểm</label><select name="place_search"><option value="0">Xin chờ...</option></select>');
                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Xin chờ...</option></select>');
                            $.ajax({
                            type: 'post',
                                    url: '<?php echo site_url() ?>get-district-device-member',
                                    data: ({id: ids, id_g: id_g}),
                                    success: function (html)
                                    {
                                    $('#districthtml').html(html);
                                            $('#placehtml').html('<label>Địa điểm</label><select name="place_search" id="place_search"><option value="0">Chọn địa điểm</option></select>');
                                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Chọn thiết bị</option></select>');
                                    }
                            });
                    });
                            $(document).on('change', '#district_search', function ()
                    {
                    var ids = $(this).val();
                            var id_g = $('#network_group').val();
                            $('#placehtml').html('<label>Địa điểm</label><select name="place_search"><option value="0">Xin chờ...</option></select>');
                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Xin chờ...</option></select>');
                            $.ajax({
                            type: 'post',
                                    url: '<?php echo site_url() ?>get-place-device-member',
                                    data: ({id: ids, id_g: id_g}),
                                    success: function (html)
                                    {
                                    $('#placehtml').html(html);
                                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Chọn thiết bị</option></select>');
                                    }
                            });
                    });
                            $(document).on('change', '#place_search', function ()
                    {
                    var ids = $(this).val();
                            var id_g = $('#network_group').val();
                            $('#_id_device').val('abc');
                            $('#devicehtml').html('<label>Thiết bị</label><select name="device_search" id="device_search"><option value="0">Xin chờ...</option></select>');
                            $.ajax({
                            type: 'post',
                                    url: '<?php echo site_url() ?>get-list-device-place-member',
                                    data: ({id: ids, id_g: id_g}),
                                    success: function (html)
                                    {
                                    $('#devicehtml').html(html);
                                    }
                            });
                    });
                            $(document).on('change', '#device_search', function ()
                    {
                    $('#_id_device').val($(this).val());
                    });
                            $('#submit-search').click(function ()
                    {
                    if ($.inArray($('#device_search').val(), [null, "", '0']) !== - 1)
                    {
                    alert('Vui lòng chọn thiết bị');
                    } else {
                    $('#form-search-device').submit();
                    }
                    });
                    });
                    
                    function changestatusaccess(mac, id, type)
                    {
                    $.ajax({
                    type: 'get',
                            url: '<?php echo site_url() ?>denny-allow-customer-device',
                            data: ({mac: mac, id: id, type: type}),
                            success: function(_data)
                            {
                            window.location = window.location.href;
                            }
                    });
                    }
            });</script>
<div id="sidetabs_body_container">
    <div id="action_bar" class="action_bar">
        <div class="actions">
        </div>

    </div>
    <div style="float: left;width: 100%;  border-bottom: 1px solid #f5f5f5;">
        <div class="l3search ">
            <form method="get" id="form-search-device" style="float: left;width: 315px;margin-top: 6px;" action="<?php echo site_url() . 'list-denny-member' ?>" style="float: left;">
                <input type="hidden" name="time" value="<?php echo $time ?>"/>
                <input type="hidden" name="id" id="_id_device" value=""/>
                <div>
                    <span>
                        <label>Từ khóa</label>
                        <input type="search" style="width: 244px;padding: 5px;" name="smart_search" id="smart_search" value="<?php echo @$smart_search ?>" placeholder="Search clients..." >
                        <button type="button" class="btn dropdown-toggle caret-select">
                            <span class="caret"></span>
                        </button>
                    </span>
                </div>
                <div class="div-search" id="div-search">
                    <span>
                        <label for="network_group">Nhóm mạng</label>
<?php echo $fview->selectOption($networkgroup, @$data->network_group ? @$data->network_group : $this->input->post('network_group'), '', 'network_group', 'network_group', 0, 'style="width: 100%;"'); ?>
                    </span>
                    <span id="provincehtml">
                        <label>Tỉnh /thành phố</label>
                        <select name="province_search">
                            <option value="0">Chọn tỉnh thành</option>
                        </select>
                    </span>
                    <span id="districthtml">
                        <label>Quận / Huyện</label>
                        <select name="district_search">
                            <option value="0">Chọn quận huyện</option>
                        </select>
                    </span>
                    <span id="placehtml">
                        <label>Địa điểm</label>
                        <select name="place_search">
                            <option value="0">Chọn địa điểm</option>
                        </select>
                    </span>
                    <span id="devicehtml">
                        <label>Thiết bị</label>
                        <select name="device_search" id="device-search">
                            <option value="0">Chọn thiết bị</option>
                        </select>
                    </span>
                    <span style="  text-align: right;">
                        <label>&nbsp;</label>
                        <input type="button" id="submit-search" value="Tìm kiếm" >
                        <input type="button" id="cancel-serach" value="Đóng lại" >
                    </span>
                </div>

            </form>

        </div>
        <div class="additional_actions">
        </div>
        <div class="search_count" style="margin-top: 10px;"><b><?php echo $sumDevice ? $sumDevice : '0' ?> Block client devices</b></div>
        <div class="input-prepend input-group" style="  width: 220px;padding: 5px 0px 5px 5px;background-color: #f5f5f5;float: right;">
            <span class="add-on input-group-addon">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
            </span>
            <input type="text" style="width: 200px" name="dropup" id="dropup" class="form-control" value="Chọn ngày tháng"> 
        </div>
    </div>
    <div id="table_area" style="">
        <table style="width:100%">
            <colgroup>
                <col>
                <col width="150px">
            </colgroup>
            <tbody>

                <tr>
                    <td>
                        <div class="flotresizer" style="height:250px;">
                            <div class="info-device-member" id="chartpie">

                            </div>
                            <div id="usage_graph" class="flotresizee" style="padding: 0px; width: 70%;float: left;  position: static;">

                                <script>
                                            $(function () {

                                            var chart = AmCharts.makeChart("chartpie", {
                                            "type": "pie",
                                                    "theme": "light",
                                                    "dataProvider": [<?php foreach ($chartspie AS $el => $le): ?>{"title": "<?php echo $le->gname ?>", "value": <?php echo $le->bw ?>},<?php endforeach; ?>],
                                                    "titleField": "title",
                                                    "valueField": "value",
                                                    "labelRadius": 5,
                                                    "radius": "42%",
                                                    "innerRadius": "60%",
                                                    "labelText": "[[title]]",
                                                    "export": {
                                                    "enabled": true
                                                    }
                                            });
                                                    var chart = AmCharts.makeChart("container", {
                                                    "type": "serial",
                                                            "theme": "light",
                                                            "autoMarginOffset": 20,
                                                            "dataDateFormat": "YYYY-MM-DD",
                                                            "valueAxes": [{
                                                            "id": "v1",
                                                                    "axisAlpha": 0,
                                                                    "position": "left"
                                                            }],
                                                            "balloon": {
                                                            "borderThickness": 1,
                                                                    "shadowAlpha": 0
                                                            },
                                                            "graphs": [{
                                                            "id": "g1",
                                                                    "bullet": "round",
                                                                    "bulletBorderAlpha": 1,
                                                                    "bulletColor": "#FFFFFF",
                                                                    "bulletSize": 5,
                                                                    "hideBulletsCount": 50,
                                                                    "lineThickness": 2,
                                                                    "title": "red line",
                                                                    "useLineColorForBulletBorder": true,
                                                                    "valueField": "value",
                                                                    "balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[type]]</div>"
                                                            }],
                                                            "chartScrollbar": {
                                                            "graph": "g1",
                                                                    "oppositeAxis":false,
                                                                    "offset":30,
                                                                    "scrollbarHeight": 50,
                                                                    "backgroundAlpha": 0,
                                                                    "selectedBackgroundAlpha": 0.1,
                                                                    "selectedBackgroundColor": "#888888",
                                                                    "graphFillAlpha": 0,
                                                                    "graphLineAlpha": 0.5,
                                                                    "selectedGraphFillAlpha": 0,
                                                                    "selectedGraphLineAlpha": 1,
                                                                    "autoGridCount":true,
                                                                    "color":"#AAAAAA"
                                                            },
                                                            "chartCursor": {
                                                            "pan": true,
                                                                    "valueLineEnabled": true,
                                                                    "valueLineBalloonEnabled": true,
                                                                    "cursorAlpha":0,
                                                                    "valueLineAlpha":0.2
                                                            },
                                                            "categoryField": "date",
                                                            "categoryAxis": {
                                                            "parseDates": true,
                                                                    "dashLength": 1,
                                                                    "minorGridEnabled": true
                                                            },
                                                            "export": {
                                                            "enabled": true
                                                            },
                                                            "dataProvider": [<?php foreach ($charts AS $el => $le): ?>{"date": "<?php echo $le->acctstoptime ?>", "value": "<?php echo ($le->bw / 1048576); ?>", "type": "<?php $ds = $fview->formatSizeUnitschart($le->bw); echo $ds['amount'].' '.$ds['type'];?>",},<?php endforeach; ?>]
                                                            });
                                                    chart.addListener("rendered", zoomChart);
                                                    zoomChart();
                                                    function zoomChart() {
                                                    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
                                                            }

                                            });</script>
                                <div id="container" style="min-width: 310px;width: 100%; height: 250px; margin: 0 auto"></div>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <div id="client_table"  class="flex-table add_col">
            <h2>Danh sách người dùng bị chặn</h2>
            <table class="filter compact fill">

                <thead>
                    <tr class="ft_head">
                        <!--- <th class="ft ftc undefined nodrag status ftsortable">
                <table class="lean" style="margin:0 auto">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td style="padding:0 5px 0 0"></td>
                            <td class="ftlegend">Status</td>
                            <td style="padding:0 5px 0 0"></td>
                        </tr>
                    </tbody>
                </table>
                </th>  -->
                <th class="ft ftl  ip ftsortable" style="width: 60px;padding-right: 0px;">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend" style="text-align: center">Access</td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl undefined nodrag description ftsortable" style="width: 150px">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">Description / Name</td>
                            <td style="padding:0 5px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl  last_seen ftsortable">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">Last seen</td>
                            <td style="padding:0 5px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl  usage ftsortable">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">Usage</td>
                            <td style="padding:0 0 2px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl  os ftsortable" style="width: 100px">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">OS</td>
                            <td style="padding:0 5px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl  os ftsortable" style="width: 100px">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">Nhóm mạng</td>
                            <td style="padding:0 5px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl  os ftsortable" style="width: 130px">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">Thiết bị</td>
                            <td style="padding:0 5px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                <th class="ft ftl  ip ftsortable" style="width: 100px">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend">IPv4 address</td>
                            <td style="padding:0 5px"></td>
                        </tr>
                    </tbody>
                </table>
                </th>
                
                <th class="ft ftl  ip ftsortable" style="width: 100px;padding-right: 0px;">
                <table class="lean">
                    <tbody>
                        <tr style="vertical-align:bottom">
                            <td class="ftlegend" style="text-align: center">Truy cập</td>
                        </tr>
                    </tbody>
                </table>
                </th>
                </tr>
                </thead>
                <tfoot>
                    <tr class="ft_foot">
                        <td class="ft_foot" colspan="11">
                            <div style="padding: 10px 10px;width: 100%"  id="pagination">
<?php echo $this->pagination->create_links(); ?>
                            </div>
                        </td>
                    </tr>
                </tfoot>
                <tbody>
<?php
$i = 0;
foreach ($data AS $el => $le):
    ?>
                        <tr class="ftp<?php echo $i > 1 ? $i = 0 : $i ?>" data-idx="0" "="" id="item_kfb340a">

                            <!-- <td class="ft undefined nodrag ftc">
    <?php echo $le->acctstoptime ? '<i class="mks-cli-wireless-off" title="Offline wireless client"></i>' : '<i class="mks-cli-wireless-on" title="online wireless client"></i>' ?>

                            </td>  -->
                            <td class="ft ip" style="text-align: center;"><?php echo ($le->denny_client == 1 && $le->allow_client == 0) ? '<i class="fa fa-shield" style="color: rgb(224, 0, 0);font-size: 18px;"></i>' : (($le->denny_client == 0 && $le->allow_client == 1) ? '<i class="fa fa-shield" style="color: rgb(11, 203, 11);font-size: 18px;"></i>' : '<i class="fa fa-shield" style="color: #1389DA;;font-size: 18px;"></i>') ?></td>
                            <td class="ft undefined nodrag">
                                <a class="suppress_click" href="<?php echo site_url() . 'customer-detail?id=' . $le->deviceid . '&mac=' . $le->callingstationid ?>"><?php echo $le->name != "No records" ? $le->name : $le->callingstationid ?></a>
                            </td>
                            <td class="ft last_seen"><?php echo $le->acctstoptime ? $le->acctstoptime : date('H:i:s d/m/Y') ?></td>
                            <td class="ft usage"><?php echo $fview->formatSize($le->bw) ?></td>
                            <td class="ft os"><?php echo $le->osname ?></td>
                            <td class="ft os"><?php echo $le->gname ?></td>
                            <td class="ft os"><?php echo $le->namedevice ?></td>
                            <td class="ft ip"><?php echo $le->framedipaddress ?></td>
                            
                            <td class="ft ip"  style="width: 80px;padding-right: 0px;">
                                
                                <a data-mac="<?php echo $le->callingstationid ?>" data-id="<?php echo $le->deviceid ?>" data-type="2" class="change-method-access-device button-allow" title="Vào trực tiếp"> Trực tiếp </a>
                                &nbsp;
                                <a  data-mac="<?php echo $le->callingstationid ?>" data-id="<?php echo $le->deviceid ?>" data-type="3" class="change-method-access-device button-normal" title="Trạng thái truy cập bình thường"> Bình thường </a>
                            </td>
                        </tr>
    <?php
    $i++;
endforeach;
?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    #pagination{
    }
    #pagination a{
        padding: 5px 10px;
        margin: 10px 2px;
        border: 1px solid #CCC;
        background: #6E6E6E;
        color: #FFF;
    }
    #pagination strong{
        padding: 5px 10px;
        margin: 10px 2px;
        border: 1px solid #CCC;
        background-color: #FFF;
    }
    .daterangepicker select.monthselect {
        margin-right: 2%;
        width: 30%;
    }

    .daterangepicker.opensright:before {
        right: 14px !important;
    }
    .daterangepicker.opensright:after {
        right: 15px !important;
    }
    #chartpie {
        width		: 29,7%;
        height		: 250px;
        font-size	: 11px;
    }							
</style>
